<template>
	<view>
		<!--商品详情列表-->
		<view class="myorder-detail-list">
			<view class="myorder-detail-item" v-for="(items,index) in orderlist" :key="index">
				<view class="myorder-detail">
					<view class="myorder-detail-item-left">
						<image :src="items.goods_pic" mode="widthFix" lazy-load></image>
					</view>
					<view class="myorder-detail-item-right">
						<view class="myorder-detail-price-status">
							<text v-if="items.order_status == 3 || items.order_status == 5 || items.order_status == 11">已失效</text>
							<text v-if="items.order_status == 1 || items.order_status == 2">待完成</text>
							<text v-if="items.order_status == 4">已完成</text>
							<text v-if="items.order_status == 6">已结算</text>
							<text>付款金额￥{{items.pay_money}}</text>
						</view>
						<view class="myorder-title">{{items.goods_name}}</view>
						<view>订单编号:{{items.order_id}}</view>
					</view>
				</view>
				<view class="myorder-detail-time">
					<view class="myorder-detail-time-left">
						<view>{{items.order_create_time}}创建</view>
						<view>{{items.order_create_time}}下单</view>
					</view>
					<view class="myorder-detail-time-right">
						<view>预估收入<text>￥{{items.money}}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar";
	export default {
		props:{
			orderlist:Array,
			tabIndex:Number
		},
		components:{
			uniNavBar
		},
		methods:{
			changeTab(index){
				// this.tabIndex = index;
				this.$emit('chang-tab',index)
			},
			openAdd(){
				// 跳转发布页
				uni.navigateTo({
					url:"/pages/add-input/add-input"
				})
			}
		}
	}
</script>

<style scoped>
	
	.nav-right>view,.nav-left>view{
		font-size: 40upx;
	}
	.nav-left>view{
		color: #FF9619;
	}
	
	.nav-left{
		margin-left: 16upx;
	}
	.nav-right{
		width: 100%;
	}
	.nav-tab-bar{
		width: 100%;
		margin-left: -20upx;
		position: relative;
	}
	.nav-tab-bar>view{
		font-size: 35upx;
		padding: 0 15upx;
		font-weight: bold;
		color: #969696;
	}
	.nav-tab-bar-line{
		position: absolute;
		bottom: 0upx;
		border-bottom: 5upx solid #FA436A;
		border-top: 5upx solid #FA436A;
		width: 70upx;
		border-radius: 20upx;
	}
	
	/* #ifdef MP-WEIXIN */
		.uni-status-bar{
			height: 0!important;
		}
	/* #endif */
	.myorder-detail-list{
		width:100%;
		background-color:#F5F5F5;
	}
	.myorder-detail-item{
		width:96%;
		padding:0 2%;
		background:#FFFFFF;
		margin-bottom:20upx;
		height:290upx;
		overflow: hidden;
	}
	.myorder-detail{
		width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
		padding-top:20upx;
		
	}
	.myorder-detail .myorder-detail-item-left{
		width:23%;
		padding-right:2%;
	}
	.myorder-detail-item-left>image{
		width:100%;
		border-radius:10upx;
		width:150upx;
		height:150upx;
	}
	.myorder-detail .myorder-detail-item-right{
		width:75%;
	}
	.myorder-detail .myorder-detail-item-right>view{
		line-height:50upx;
	}
	.myorder-detail-price-status{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
	}
	.myorder-detail-price-status>text:first-child{
		background-color:#bfbfbf;
		padding:0 15upx;
		border-radius:20upx;
		color:#FFFFFF;
		display:block;
		width:20%;
		text-align: center;
	}
	.myorder-detail-price-status>text:last-child{
		text-align:right;
		display:block;
		width:60%;
		align-self:flex-end;
	}
	.myorder-title{
		white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
		overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
		text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
		-o-text-overflow: ellipsis; /* 特定浏览器前缀 */
		text-decoration: none; /* 无用 */
	}
	.myorder-detail-item-right>view:last-child{
		color:#ccc;
	}
	.myorder-detail-time{
		width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
		padding-bottom:10upx;
	}
	.myorder-detail-time .myorder-detail-time-left{
		width:60%;
		color:#CCCCCC;
	}
	.myorder-detail-time .myorder-detail-time-right{
		width:40%;
		margin-top:20upx;
		text-align:right;
	}
	.myorder-detail-time-right>view:first-child{
		font-size:25upx;
	}
	.myorder-detail-time-right>view:first-child>text{
		color:#FF3333;
		font-size:35upx;
	}
</style>
